<template>
  <div class="courseDetailsBox">
    <!-- 搜索 start-->
     <div class="courseSearch">
       <span class="searchBox">
         <input type="text" placeholder="搜索">
         <img src="../../static/image/sousuo.png" alt="">
       </span>
      </div>
    <!-- 搜索 end-->
     <div class="courseImg"><img src="../../static/image/icon-title.png" alt=""></div>
     <div class="courseContant">
       <div class="courseNav">
         <div class="courseInvite">
           <router-link to="" class="inviteButton"><img src="../../static/image/yaoqing.png" alt="">发起邀请</router-link>
         </div>
         <div class="courseCreate">
           <router-link to="create-course" class="creatButton"><img src="../../static/image/add-course.png" alt="">创建课程</router-link>
         </div>
         <!-- <div class="courseChange">
           <span :class="{'courseActive':courseShow=='课程情况'}" @click="courseShow='课程情况'">课程情况</span>
           <span :class="{'courseActive':courseShow=='已购课程'}" @click="courseShow='已购课程'">已购课程</span>
         </div>
         <div class="courseCreate">
           <router-link to="create-course" class="creatButton">+&nbsp;创建课程</router-link>
         </div> -->
       </div>
       <!-- 课程情况 start-->
       <div class="courseSituation" v-if="courseShow == '课程情况'">
         <!-- 正在进行 start-->
         <div class="courseDoing">
           <div class="public-header">
              <div class="public-header-ch">正在进行</div>
              <div class="public-header-en">ONGOING</div>
              <div class="public-header-line"></div>
           </div>
           <div class="courseTable">
             <table class="redTable">
               <thead>
                 <tr>
                   <th class="tableOne">课程名称</th>
                   <th class="tableTwo">讲师</th>
                   <th class="tableThree">开课日期</th>
                   <th class="tableFour">开课时间</th>
                   <th class="tableFive">人数</th>
                   <th class="tableSix">管理操作</th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-if="doingLists.length==0">
                   <td colspan="6" class="no-content">尚无课程信息</td>
                 </tr>
                 <tr v-for="(doingList,index) in doingLists" :key='index' :data-id="doingList.courseId">
                   <td>{{doingList.courseName}}</td>
                   <td>{{doingList.lecturer}}</td>
                   <td>{{doingList.startTime.split(' ')[0]}}</td>
                   <td>{{doingList.startTime.split(' ')[1]}}</td>
                   <td>{{doingList.numberOfPeople}}</td>
                   <td>
                     <router-link :to="{name:'course-details-page',params:{id:doingList.courseId}}"><span ><img src="../../static/image/icon-detail.png" alt="">课程详情</span></router-link>
                     <router-link to=""><span><img src="../../static/image/icon-eye.png" alt="">课程后台</span></router-link>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
           <!-- page -->
            <!-- <el-pagination  v-show="ongoingTotal!=0"  background layout="prev, pager, next" :total="ongoingTotal" @current-change="handleCurrentChange"></el-pagination> -->
            <el-pagination   v-show="ongoingTotal!=0"  background layout="prev, pager, next" :total="ongoingTotal" @current-change="onGoingCourse"></el-pagination>
            <!-- page end-->
         </div>
         <!-- 正在进行 end-->
         <!-- 即将开始 start-->
         <div class="courseDoing">
           <div class="public-header">
            <div class="public-header-ch">即将开始</div>
            <div class="public-header-en">COMING SOON</div>
            <div class="public-header-line"></div>
           </div>
           <div class="courseTable">
             <table>
               <thead>
                 <tr>
                   <th class="tableOne">课程名称</th>
                   <th class="tableTwo">讲师</th>
                   <th class="tableThree">开课日期</th>
                   <th class="tableFour">开课时间</th>
                   <th class="tableFive">人数</th>
                   <th class="tableSix">管理操作</th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-if="doLists.length==0">
                   <td colspan="6" class="no-content">尚无课程信息</td>
                 </tr>
                 <tr v-for="(doList,index) in doLists" :key='index' :data-id="doList.courseId">
                   <td>{{doList.courseName}}</td>
                   <td>{{doList.lecturer}}</td>
                   <td>{{doList.startTime.split(' ')[0]}}</td>
                   <td>{{doList.startTime.split(' ')[1]}}</td>
                   <td>{{doList.numberOfPeople}}</td>
                   <td>
                     <router-link :to="{name:'course-details-page',params:{id:doList.courseId}}"><span><img src="../../static/image/icon-detail.png" alt="">课程详情</span></router-link>
                     <router-link to=""><span><img src="../../static/image/icon-close.png" alt="">关闭课程</span></router-link>
                   </td>
                 </tr>
                 <!-- 挑战 -->
                 <!-- <tr v-for="doList in doLists">
                   <td>
                     <i class="doChallenge">挑战</i>
                     {{doList.name}}
                     </td>
                   <td>{{doList.lecturer}}</td>
                   <td>{{doList.data}}</td>
                   <td>{{doList.time}}</td>
                   <td>{{doList.number}}</td>
                   <td>
                     <router-link to=""><span><img src="../../static/image/icon-detail.png" alt="">挑战详情</span></router-link>
                     <router-link to=""><span><img src="../../static/image/icon-close.png" alt="">关闭课程</span></router-link>
                   </td>
                 </tr> -->
               </tbody>
             </table>
           </div>
           <!-- page -->
            <!-- <el-pagination v-show="comingSoonTotal!=0" background layout="prev, pager, next" :total="comingSoonTotal" @current-change="handleCurrentChange"></el-pagination> -->
            <el-pagination v-show="comingSoonTotal!=0" background layout="prev, pager, next" :total="comingSoonTotal" @current-change="comingSoonCourse"></el-pagination>
           <!-- page end-->
         </div>
         <!-- 即将开始 end-->
         <!-- 邀请中 start-->
         <!-- <div class="courseDoing"> -->
           <!-- <div class="public-header">
              <div class="public-header-ch">邀请中</div>
              <div class="public-header-en">INVITING</div>
              <div class="public-header-line"></div>
           </div> -->
           <!-- <div class="courseTable">
             <table>
               <thead>
                 <tr>
                   <el-checkbox v-model="checked"></el-checkbox>
                   <th>课程名称</th>
                   <th>报名截止时间</th>
                   <th>开课日期</th>
                   <th>开课时间</th>
                   <th>人数</th>
                   <th>管理操作<span class="merge-invited">合并邀请</span></th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-if="invitingList.length == 0">
                   <td colspan="6" class="no-content">尚无课程信息</td>
                 </tr>
                 <tr v-for="item in invitingList" :key="item.id">
                   <el-checkbox v-model="checked"></el-checkbox>
                   <td>{{item.courseName}}</td>
                   <td>{{item.deadlineTime}}</td>
                   <td>{{item.date}}</td>
                   <td>{{item.startTime}}</td>
                   <td>{{item.people}}</td>
                   <td>
                     <a><span ><img src="../../static/image/icon-detail.png" alt="">课程详情</span></a> -->
                     <!-- <router-link to=""><span><img src="../../static/image/tuzhang.png" alt="">进入审核</span></router-link>
                     <a><span><img src="../../static/image/yaoqing.png" alt="">邀&nbsp;&nbsp;请</span></a>
                     <router-link to="home"><span ><img src="../../static/image/icon-detail.png" alt="">课程详情</span></router-link>
                     <router-link to="to"><span><img src="../../static/image/yaoqing.png" alt="">邀&nbsp;&nbsp;请</span></router-link>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div> -->
           <!-- page -->
          <!-- <el-pagination  v-show="completedTotal!=0"  background layout="prev, pager, next" :total="completedTotal" @current-change="handleCurrentChange"></el-pagination> -->
           <!-- page end-->
          <!-- </div> -->
         <!-- 邀请中 end-->
         <!-- 已发出邀请挑战 start-->
         <!-- <div class="courseDoing">
           <div class="public-header">
              <div class="public-header-ch">已发出邀请挑战</div>
              <div class="public-header-en">INVITATION SENT</div>
              <div class="public-header-line"></div>
           </div>
           <div class="courseTable">
             <table>
               <thead>
                 <tr>
                   <th>课程名称</th>
                   <th>讲师</th>
                   <th>开课日期</th>
                   <th>开课时间</th>
                   <th>人数</th>
                   <th>管理操作</th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-if="invitationsentList.length==0">
                   <td colspan="6" class="no-content">尚无课程信息</td>
                 </tr>
                 <tr v-for="list in invitationsentList" :key="list.id">
                   <td><i class="doChallenge">挑战</i>{{list.courseName}}</td>
                   <td>{{list.teacher}}</td>
                   <td>{{list.date}}</td>
                   <td>{{list.startTime}}</td>
                   <td>{{list.people}}</td>
                   <td>
                     <a><span ><img src="../../static/image/icon-detail.png" alt="">课程详情</span></a>
                     <a><span><img src="../../static/image/icon-close.png" alt="">关闭课程</span></a> -->
                     <!-- <router-link :to="{name:'course-details-page',params:{id:doneList.courseId}}"><span ><img src="../../static/image/icon-detail.png" alt="">课程详情</span></router-link>
                     <router-link to=""><span><img src="../../static/image/icon-close.png" alt="">关闭课程</span></router-link> -->
                     <!-- <router-link to=""><span><img src="../../static/image/icon-close.png" alt="">关闭挑战</span></router-link> -->
                   <!-- </td>
                 </tr>
               </tbody>
             </table>
           </div> -->
           <!-- page -->
           <!-- <el-pagination  background layout="prev, pager, next" :total="5"></el-pagination> -->
            <!-- <el-pagination  v-show="completedTotal!=0"  background layout="prev, pager, next" :total="completedTotal" @current-change="handleCurrentChange"></el-pagination> -->
            <!-- page end-->
         <!-- </div> -->
         <!-- 已发出邀请挑战 end-->
         <!-- 已完成 -->
         <div class="courseDoing">
           <div class="public-header">
            <div class="public-header-ch">已完成</div>
            <div class="public-header-en">COMPLETED</div>
            <div class="public-header-line"></div>
          </div>
           <div class="courseTable">
             <table>
               <thead>
                 <tr>
                   <th class="tableOne">课程名称</th>
                   <th class="tableTwo">讲师</th>
                   <th class="tableThree">开课日期</th>
                   <th class="tableFour">开课时间</th>
                   <th class="tableFive">人数</th>
                   <th class="tableSix">管理操作</th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-if="doneLists.length==0">
                   <td colspan="6" class="no-content">尚无课程信息</td>
                 </tr>
                 <tr v-for="(doneList,doneIndex) in doneLists" :key='doneIndex' :data-id='doneList.courseId'>
                   <td class="tableFirst">{{doneList.courseName}}</td>
                   <td class="tableSecond">{{doneList.lecturer}}</td>
                   <td class="tableThird">{{doneList.startTime.split(' ')[0]}}</td>
                   <td class="tableFourth">{{doneList.startTime.split(' ')[1]}}</td>
                   <td class="tableFiveth">{{doneList.numberOfPeople}}</td>
                   <td class="tableSixth">
                     <router-link :to="{name:'course-details-page',params:{id:doneList.courseId}}"><span><img src="../../static/image/icon-detail.png" alt="">课程信息</span></router-link>
                     <router-link to=""><span><img src="../../static/image/icon-eye.png" alt="">课程后台</span></router-link>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div>
           <!-- page -->
            <el-pagination v-show="completedTotal!=0" background layout="prev, pager, next" :total="completedTotal" @current-change="completedCourse"></el-pagination>
           <!-- page end-->
         </div>
         <!-- 已完成 end-->
         <!-- 已关闭 start-->
         <!-- <div class="courseDoing">
           <div class="public-header">
            <div class="public-header-ch">已关闭</div>
            <div class="public-header-en">CLOSE</div>
            <div class="public-header-line"></div>
          </div>
           <div class="courseTable">
             <table>
               <thead>
                 <tr>
                   <th>课程名称</th>
                   <th>讲师</th>
                   <th>开课日期</th>
                   <th>开课时间</th>
                   <th>人数</th>
                   <th>管理操作</th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-if="closedList.length == 0">
                   <td colspan="6" class="no-content">尚无课程信息</td>
                 </tr>
                 <tr v-for="list in closedList" :key="list.id">
                   <td>{{list.courseName}}</td>
                   <td>{{list.teacher}}</td>
                   <td>{{list.date}}</td>
                   <td>{{list.startTime}}</td>
                   <td>{{list.people}}</td>
                   <td>
                     <a><span><img src="../../static/image/icon-detail.png" alt="">课程详情</span></a>
                     <a><span><img src="../../static/image/icon-start.png" alt="">开启课程</span></a>
                   </td>
                 </tr>
               </tbody>
             </table>
           </div> -->
           <!-- page -->
           <!-- <el-pagination  background layout="prev, pager, next" :total="5"></el-pagination> -->
            <!-- <el-pagination v-show="completedTotal!=0" background layout="prev, pager, next" :total="completedTotal" @current-change="handleCurrentChange"></el-pagination> -->
           <!-- page end-->   
         <!-- </div> -->
         <!-- 已关闭 end-->
       </div>
       <!-- 课程情况 end-->
       <!-- 已购课程 start-->
       <div class="courseSituation" v-if="courseShow == '已购课程'">
         <div class="courseDoing">
           <div class="public-header">
            <div class="public-header-ch">已购课程</div>
            <div class="public-header-en">URCHASED COURSE</div>
            <div class="public-header-line"></div>
            <div class="courseImage"><img src="../../static/image/marksimos.png" alt=""></div>
          </div>
         </div>
       </div>
       <!-- 已购课程 end-->
     </div>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        checked:'',
        // 正在进行总条数
        ongoingTotal:0,
        // 即将开始总条数
        comingSoonTotal:0,
        // 已完成总条数
        completedTotal:0,

        courseShow:'课程情况',
        // 正在进行
        doingLists:[],
        // 即将开始
        doLists:[],
         // 已完成
        doneLists:[],
        // 邀请中
        // invitingList:[
        //   {
        //     courseName:'邀请测试',
        //     deadlineTime:'2018-06-26',
        //     date:'2018-06-28',
        //     startTime:'10:00',
        //     people:'10',
        //   }
        // ],
        // 已发出邀请挑战
        // invitationsentList:[
        //   { 
        //     courseName:'《像CEO一样思考》 商战模拟 公开课',
        //     teacher:'张赫平',
        //     date:'2017/11/15',
        //     startTime:'13:30',
        //     people:'16/16'
        //   }
        // ],
        // 已关闭
        // closedList:[
        //   { 
        //     courseName:'《像CEO一样思考》 商战模拟 公开课',
        //     teacher:'张赫平',
        //     date:'2017/11/15',
        //     startTime:'13:30',
        //     people:'16/16'
        //   }
        // ]
      }
    },
    methods:{
      // 正在进行
      onGoingCourse(currentPage = 1){
        let data = {
          // 当前页码
          pageNow: currentPage,
          // 每页显示数据条数
          pageSize: 5,

        }
        this.$http.onGoingCourse(data,(res)=>{
          this.doingLists = res.data.adminAllCourseList;
          this.ongoingTotal = res.data.count;
          // console.log(res);
          // console.log(this.ongoingTotal);
        },(errRes) =>{
          console.log(errRes);
        })
      },
      // 即将开始
      comingSoonCourse(currentPage = 1){
        let data = {
          // 当前页码
          pageNow: currentPage,
          // 每页显示数据条数
          pageSize: 5,

        }
        this.$http.comingSoonCourse(data,(res)=>{
          this.doLists = res.data.adminAllCourseList;
          this.comingSoonTotal = res.data.count;
        },(errRes)=>{
          console.log(errRes);
        })
      },
      // 已完成
      completedCourse(currentPage = 1){
        let data = {
          // 当前页码
          pageNow: currentPage,
          // 每页显示数据条数
          pageSize: 5,
        }
        this.$http.completedCourse(data,(res)=>{
           //console.log(res.data)
          this.doneLists = res.data.adminAllCourseList;
          this.completedTotal = res.data.count;
        },(errRes)=>{
          console.log(errRes);
        })
      },
      handleCurrentChange:function(currentPage){
        // 正在进行分页
        //  this.onGoingCourse(currentPage);
        // 即将开始分页
        //  this.comingSoonTotal(currentPage);
        // 已完成分页
        //  this.completedTotal(currentPage);
      },
    },
    created(){

    },
    mounted(){ 
      this.onGoingCourse();
      this.comingSoonCourse();
      this.completedCourse();
      
    },
  }
</script>
